<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>导航条</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
	</head>
	<body style="padding: 50px 0px;height: 2000px;">
		<!--
        	navbar              导航条的基础样式
        	nav navbar-nav      导航条里菜单的固定样式组合class
        	navbar-default      导航条默认样式
        	navbar-inverse      导航条的样式为黑色
        	navbar-static-top   导航条为直角,需要给body加一个padding或着margin
      		navbar-fixed-top    导航条固定在最上边
      		navbar-fixed-button 导航条固定在最底部，不会随着滚动而走。
        -->
		<div class="container">
			<!-- 默认样式的导航条 -->
			<nav class="navbar navbar-default">
				<ul class="nav navbar-nav">
					<li><a href="#">海淀</a></li>
					<li class="active"><a href="#">朝阳</a></li>
					<li><a href="#">通州</a></li>
					<li><a href="#">大兴</a></li>
				</ul>
			</nav>
			<!-- 黑色样式的导航条 -->
			<nav class="navbar navbar-inverse">
				<ul class="nav navbar-nav">
					<li><a href="#">海淀</a></li>
					<li><a href="#">朝阳</a></li>
					<li class="active"><a href="#">通州</a></li>
					<li><a href="#">大兴</a></li>
				</ul>
			</nav>
			<!-- 直角样式的导航条 -->
			<nav class="navbar navbar-inverse navbar-static-top">
				<ul class="nav navbar-nav">
					<li><a href="#">海淀</a></li>
					<li><a href="#">朝阳</a></li>
					<li class="active"><a href="#">通州</a></li>
					<li><a href="#">大兴</a></li>
				</ul>
			</nav>
			<!-- 固定顶部位置的导航条 -->
			<nav class="navbar navbar-inverse navbar-fixed-top">
				<ul class="nav navbar-nav">
					<li><a href="#">海淀</a></li>
					<li><a href="#">朝阳</a></li>
					<li class="active"><a href="#">通州</a></li>
					<li><a href="#">大兴</a></li>
				</ul>
			</nav>
			<!-- 固定底部位置的导航条 -->
			<nav class="navbar navbar-inverse navbar-fixed-bottom">
				<ul class="nav navbar-nav">
					<li><a href="#">海淀</a></li>
					<li><a href="#">朝阳</a></li>
					<li class="active"><a href="#">通州</a></li>
					<li><a href="#">大兴</a></li>
				</ul>
			</nav>
		</div>
		<script type="text/javascript" src="../../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>
</html>
